<template>
  <div>

    <div class="head">
      <div class="down">
        <img src="@/assets/down.png" alt="" @click="down">
        <span>收益明细</span>
      </div>
      <div class="earnings_cash">

        <van-row>

          <van-col span="12">

            <div class="earnings">
              <span class="lj">累计收益</span>
              <span class="money">￥{{this.depositShouyi}}</span>
            </div>
          </van-col>
          <van-col span="12">
            <div class="cash" @click="cash">
              <span class="tx">可提现金额</span>
              <span class="num">￥{{this.depositKetixian}}</span>
            </div>

          </van-col>
        </van-row>
      </div>
    </div>


    <div v-for="item in listDep" class="causelist">
      <div class="diyi">
        <div class="one_text">
          <span>收益原因收益原因</span>
        </div>
        <div class="number">
          <span>+{{item.depositMoney}}</span>
        </div>
      </div>
      <div class="dier">
        <div class="second_text">
          <span class="time">{{item.timedate}}</span>
          <span class="ye">余额 :{{item.balance}}</span>
        </div>
      </div>
    </div>
    <!--<div v-for="item in listDep" >-->
    <!--<span class="tx">可提现金额</span>-->
    <!--<span class="num">￥{{item.depositKetixian}}</span>-->
    <!--</div>-->

  </div>
</template>
<script>

  import {listDeposit, getDeposit, updateDeposit} from "@/api/customer/deposit";

  import {getIncome} from "@/api/customer/income"

  export default {
    data() {
      return {
        listDep: [],
        depositKetixian: '',
        depositShouyi: '',
        depositId: '',
      }
    },


    created() {
      this.listDeposit();
    },

    methods: {


      listDeposit() {
        getIncome().then(res => {
          this.listDep = res.data.data;
          this.depositShouyi = res.data.data[res.data.data.length-1].totalNum;

        })

      },


      down() {
        this.$router.push({path: "/my_index"});
      },
      cash() {
        this.$router.push({
          path: "/Cash",
          query: {depositId: this.depositId}
        });
      }
    }
  }
</script>
<style scoped>
  .head {
    width: 414px;
    height: 162px;
    line-height: 20px;
    background-color: rgba(195, 155, 115, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
  }

  .down {
    width: 414px;
    height: 25px;
    display: flex;
    margin-top: 10px;
  }

  .down img {
    width: 25px;
    margin-left: 10px;

    height: 25px;
  }

  .down span {
    color: rgba(255, 255, 255, 100);
    font-size: 15px;
    text-align: left;
    line-height: 25px;
  }

  .earnings_cash {
    width: 414px;
    height: 80px;
    margin: 1rem 0rem 0rem -3.5rem;
  }

  .earnings {

    height: 80px;
    /*margin-left: 30px;*/
    /*float: left;*/
    display: flex;
    /*margin-left: 3rem;*/
    flex-direction: column;
  }

  .earnings span {
    line-height: 30px;
  }

  .lj {
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    font-family: SourceHanSansSC-regular;
  }

  .money {
    color: rgba(255, 255, 255, 100);
    font-size: 23px;
    text-align: center;
    font-family: PingFangSC-bold;
  }

  .cash {
    height: 80px;
    float: left;
    display: flex;
    flex-direction: column;
    margin-left: 75px;
  }

  .cash span {
    line-height: 30px;
  }

  .tx {
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    font-family: SourceHanSansSC-regular;
  }

  .num {
    color: rgba(255, 255, 255, 100);
    font-size: 23px;
    text-align: center;
    font-family: PingFangSC-bold;
  }

  .causelist {
    width: 100vw;
    height: 94px;
    border-bottom: 1px solid #777;

  }

  .diyi {
    width: 350px;
    height: 50px;
    margin: 0 auto;
    /* background-color: pink; */
  }

  .one_text {
    float: left;
    color: rgba(16, 16, 16, 100);
    font-size: 16px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
    line-height: 50px;
  }

  .number {
    line-height: 50px;
    float: right;
    color: rgba(253, 195, 2, 100);
    font-size: 18px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }

  .dier {
    width: 350px;
    height: 50px;
    margin: 0 auto;
    /* background-color: pink; */
  }

  .time {
    float: left;
    color: rgba(136, 136, 136, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }

  .ye {
    float: right;
    color: rgba(136, 136, 136, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }
</style>
